<div class="d-flex flex-column w-100 h-100 bg-theme2 text-theme2">
    <div class="overflow-y-auto flex-grow-1 position-relative"  #settingPanel>
        <div
          class="d-flex bg-theme2 flex-row sticky-top z-1 justify-content-start justify-content-sm-between"
            >
            <div class="d-flex flex-column pt-2 mx-2">
                <div style="font-size: 20px;font-weight: bold;">
                    {{'settings.self' | translate}}
                </div>
                <div style="font-size: 14px">
                    {{'settings.defaultProperties' | translate}}
                </div>
            </div>
            <div class="py-2 my-auto pe-4 ms-5 ms-sm-0">
                <button nz-button class="border-1 rounded-2" [routerLink]="['/chat']">
                    <span nz-icon nzType="close" nzTheme="outline"></span>
                </button>
            </div>
        </div>
        <div class="w-100 d-flex flex-column" >
            <button class="back-to-top text-center"
                    nz-button
                    (click)="scrollToTop()"
                    nz-tooltip [nzTooltipTitle]="'settings.backToTop' | translate"
              ><span nz-icon nzType="arrow-up" nzTheme="outline"></span>
            </button>
            <nz-card class="m-2 rounded-4">
                <div class="py-2">
                    <span class="title">{{'settings.self' | translate}}</span>
                </div>
                <div class="d-flex flex-row-reverse setting-action">
                    <button nz-button nzType="primary"
                            (click)="applyChangeRightNow()"
                    >
                        <span nz-icon nzType="fall" nzTheme="outline"></span>
                      {{'settings.applySettings' | translate}}
                    </button>
                    <button nz-button nzType="primary"
                            (click)="resetConfiguration()"
                    >
                        <span nz-icon nzType="undo" nzTheme="outline"></span>
                      {{'settings.restoreDefaultSettings' | translate}}
                    </button>

                </div>
            </nz-card>
            <nz-card class="m-2 rounded-4">
              <div class="py-2">
                <span class="title">{{'settings.quickConfig' | translate}}</span>
              </div>
              <div class="d-flex justify-content-between m-1">
                <nz-col>
                  {{'settings.importExportConfig' | translate}}
                </nz-col>
                <nz-row>
                  <nz-col>
                    <nz-modal [(nzVisible)]="outputConfigVisible"
                              [nzFooter]="[]"
                              [nzTitle]="'settings.configExport' | translate"
                              (nzOnCancel)="closeOutput()" (nzOnOk)="okAndCloseOutput()"
                      >
                      <ng-container *nzModalContent>
                        <app-config-export [config]="configuration" ></app-config-export>
                      </ng-container>
                    </nz-modal>
                    <button nz-button (click)="outputConfigVisible = true" >
                      {{'settings.exportConfig' | translate}}
                    </button>
                  </nz-col>
                  <nz-col class="mx-1">
                    <nz-modal [(nzVisible)]="inputConfigVisible"
                              [nzTitle]="'settings.configImport' | translate"
                              [nzFooter]="[]"
                              (nzOnCancel)="handleInputCancel()"
                              (nzOnOk)="handleInputConfigOk()">
                      <ng-container *nzModalContent>
                        <app-config-import
                          (configInput)="handleConfigInput($event)"
                          >
                        </app-config-import>
                      </ng-container>
                    </nz-modal>
                    <button nz-button (click)="inputConfigVisible = true">
                      {{'settings.importConfig' | translate}}
                    </button>
                  </nz-col>
                </nz-row>
              </div>
            </nz-card>
            <nz-card class="m-2 rounded-4">
                <div class="py-2">
                    <span class="title">{{'settings.displayOptions' | translate}}</span>
                </div>
                <div class="d-flex justify-content-between m-1">
                    <nz-col>
                      {{'settings.fontSize' | translate}}
                    </nz-col>
                    <nz-row>
                        <nz-col>
                            <nz-slider class="slider" nzMin="10" nzMax="32" nzStep="1"
                                       [(ngModel)]="configuration.displayConfiguration.fontSize"
                            >
                            </nz-slider>
                        </nz-col>
                        <nz-col>
                            <nz-input-number
                                    [nzMin]="10"
                                    [nzStep]="1"
                                    [nzMax]="32"
                                    [ngStyle]="{ marginLeft: '16px' }"
                                    [(ngModel)]="configuration.displayConfiguration.fontSize">
                            </nz-input-number>
                        </nz-col>
                    </nz-row>
                </div>
                <div class="d-flex align-items-center justify-content-center m-1">
                    <div [style]="'font-size: '+configuration.displayConfiguration.fontSize+'px;'">
                        示例文本 AaBbCc
                    </div>
                </div>
              <div class="d-flex justify-content-between m-1">
                <div class="title">{{'settings.theme' | translate}}</div>
                <div>
                  <nz-select class="select big" [(ngModel)]="dynamicConfig.theme" (ngModelChange)="themeChange()">
                    <nz-option-group [nzLabel]="'settings.theme' | translate">
                      @for(theme of themes; track theme){
                        <nz-option
                                   [nzValue]="theme" [nzLabel]="theme"></nz-option>
                      }
                    </nz-option-group>
                  </nz-select>
                </div>
              </div>
              <div class="d-flex justify-content-between m-1">
                <div class="title">{{'settings.language' | translate}}</div>
                <div>
                  <nz-select class="select big" [(ngModel)]="dynamicConfig.language" (ngModelChange)="languageChange($event)">
                    <nz-option-group [nzLabel]="'settings.language' | translate">
                      @for(language_pair of displayLanguages; track language_pair){
                        <nz-option
                          [nzValue]="language_pair.value" [nzLabel]="language_pair.label"></nz-option>
                      }
                    </nz-option-group>
                  </nz-select>
                </div>
              </div>
            </nz-card>
            <nz-card class="m-2 rounded-4">
                <div class="py-2">
                    <span class="title">{{'settings.connectionInfo' | translate}}</span>
                </div>
                <div class="d-flex justify-content-between m-1">
                    <div>
                        <div>
                            <span class="title">{{'settings.backendServerAddress' | translate}}</span>
                        </div>
                        <div>
                            <span class="follow">{{'settings.standardBackendServerAddress' | translate}}</span>
                        </div>
                    </div>
                    <div>
                        <input nz-input [(ngModel)]="configuration.endpoint">
                    </div>
                </div>
                <div class="d-flex justify-content-between  m-1">
                    <div>
                        <div>
                            <span class="title">{{'settings.backendServiceKeyAccessKey' | translate}}</span>
                        </div>
                        <div>
                            <span class="follow">{{'settings.fillAuthenticationKeyNotRequired' | translate}}</span>
                        </div>
                    </div>
                    <div>
                        <input nz-input [(ngModel)]="configuration.accessKey">
                    </div>
                </div>
                <div class="d-flex justify-content-between  m-1">
                    <div>
                        <div>
                            <span class="title">{{'settings.openaiServiceAddressBaseUrl' | translate}}</span>
                        </div>
                        <div>
                            <span class="follow">{{'settings.standardOpenaiServerAddressExample' | translate}}https://api.open-test.com</span>
                        </div>
                    </div>
                    <div>
                        <input nz-input [(ngModel)]="configuration.baseUrl">
                    </div>
                </div>
                <div class="d-flex justify-content-between  m-1">
                    <div>
                        <div>
                            <span class="title">{{'settings.openaiKeyApiKey' | translate}}</span>
                        </div>
                        <div>
                            <span class="follow">{{configuration.baseUrl === undefined || configuration.baseUrl === '' ? ('settings.standardOpenAIServers' | translate) : ('settings.keyFrom' | translate) + configuration.baseUrl}}
                                </span>
                        </div>
                    </div>
                    <div>
                        <input nz-input [(ngModel)]="configuration.apiKey">
                    </div>
                </div>
            </nz-card>
            <nz-card class="m-2 rounded-4">
                <div class="py-2">
                    <span class="title">{{'settings.defaultDialogueProperties' | translate}}</span>
                </div>

                <div class="d-flex justify-content-between  m-1">
                    <div>
                        <div>
                            <span class="title">{{'settings.maxTokensPerInteraction' | translate}}</span>
                        </div>
                        <div>
                            <span class="follow">{{'settings.maxTokenUsagePerInteraction' | translate}}</span>
                        </div>
                    </div>
                    <nz-row>
                        <nz-col>
                            <nz-slider class="slider big" [(ngModel)]="configuration!.chatConfiguration.max_tokens"
                                       [nzStep]="1" [nzMin]="1" [nzMax]="32000"></nz-slider>
                        </nz-col>
                        <nz-col>
                            <nz-input-number
                                    [nzMin]="1"
                                    [nzMax]="32000"
                                    [ngStyle]="{ marginLeft: '16px' }"
                                    [(ngModel)]="configuration!.chatConfiguration.max_tokens"
                            ></nz-input-number>
                        </nz-col>
                    </nz-row>
                </div>

                <div class="d-flex justify-content-between m-1">
                    <div>
                        <div>
                            <span class="title">{{'settings.randomnessTemperature' | translate}}</span>
                        </div>
                        <div>
                            <span class="follow">{{'settings.higherValueMoreRandomness' | translate}}</span>
                        </div>
                    </div>
                    <nz-row>
                        <nz-col>
                            <nz-slider class="slider" [(ngModel)]="configuration!.chatConfiguration!.temperature"
                                       [nzStep]="0.01" [nzMin]="0" [nzMax]="1"></nz-slider>
                        </nz-col>
                        <nz-col>
                            <nz-input-number
                                    [nzMin]="0"
                                    [nzStep]="0.01"
                                    [nzMax]="1"
                                    [ngStyle]="{ marginLeft: '16px' }"
                                    [(ngModel)]="configuration!.chatConfiguration!.temperature"
                            ></nz-input-number>
                        </nz-col>
                    </nz-row>
                </div>

                <div class="d-flex justify-content-between  m-1">
                    <div>
                        <div>
                            <span class="title">{{'settings.nucleusSamplingTopP' | translate}}</span>
                        </div>
                        <div>
                            <span class="follow">{{'settings.similarToRandomnessButSeparate' | translate}}</span>
                        </div>
                    </div>
                    <nz-row>
                        <nz-col>
                            <nz-slider class="slider" [(ngModel)]="configuration!.chatConfiguration.top_p"
                                       [nzStep]="0.01" [nzMin]="0" [nzMax]="1"></nz-slider>
                        </nz-col>
                        <nz-col>
                            <nz-input-number
                                    [nzMin]="0"
                                    [nzStep]="0.01"
                                    [nzMax]="1"
                                    [ngStyle]="{ marginLeft: '16px' }"
                                    [(ngModel)]="configuration!.chatConfiguration.top_p"
                            ></nz-input-number>
                        </nz-col>
                    </nz-row>
                </div>


                <div class="d-flex justify-content-between  m-1">
                    <div>
                        <div>
                            <span class="title">{{'settings.topicNoveltyPresencePenalty' | translate}}</span>
                        </div>
                        <div>
                            <span class="follow">{{'settings.higherValueExpandsToNewTopics' | translate}}</span>
                        </div>
                    </div>
                    <nz-row>
                        <nz-col>
                            <nz-slider class="slider" [(ngModel)]="configuration!.chatConfiguration.presence_penalty"
                                       [nzStep]="0.01" [nzMin]="0" [nzMax]="1"></nz-slider>
                        </nz-col>
                        <nz-col>
                            <nz-input-number
                                    [nzMin]="0"
                                    [nzStep]="0.01"
                                    [nzMax]="1"
                                    [ngStyle]="{ marginLeft: '16px' }"
                                    [(ngModel)]="configuration!.chatConfiguration.presence_penalty"
                            ></nz-input-number>
                        </nz-col>
                    </nz-row>
                </div>

                <div class="d-flex justify-content-between  m-1">
                    <div>
                        <div>
                            <span class="title">{{'settings.frequencyPenalty' | translate}}</span>
                        </div>
                        <div>
                            <span class="follow">{{'settings.higherValueReducesRepetitiveWords' | translate}}</span>
                        </div>
                    </div>
                    <nz-row>
                        <nz-col>
                            <nz-slider class="slider" [(ngModel)]="configuration!.chatConfiguration.frequency_penalty"
                                       [nzStep]="0.01" [nzMin]="0" [nzMax]="1"></nz-slider>
                        </nz-col>
                        <nz-col>
                            <nz-input-number
                                    [nzMin]="0"
                                    [nzStep]="0.01"
                                    [nzMax]="1"
                                    [ngStyle]="{ marginLeft: '16px' }"
                                    [(ngModel)]="configuration!.chatConfiguration.frequency_penalty"
                            ></nz-input-number>
                        </nz-col>
                    </nz-row>
                </div>
                <div class="d-flex justify-content-between  m-1">
                    <div>
                        <div>
                            <span class="title">{{'settings.relatedHistoryMessageCount' | translate}}</span>
                        </div>
                        <div>
                            <span class="follow">{{'settings.historyMessageCountPerRequest' | translate}}</span>
                        </div>
                    </div>
                    <nz-row>
                        <nz-col>
                            <nz-slider class="slider"
                                       [(ngModel)]="configuration!.chatConfiguration.historySessionLength"
                                       [nzStep]="1" [nzMin]="1" [nzMax]="100"></nz-slider>
                        </nz-col>
                        <nz-col>
                            <nz-input-number
                                    [nzMin]="1"
                                    [nzMax]="100"
                                    [ngStyle]="{ marginLeft: '16px' }"
                                    [(ngModel)]="configuration!.chatConfiguration.historySessionLength"
                            ></nz-input-number>
                        </nz-col>
                    </nz-row>
                </div>
                <div class="d-flex justify-content-between  m-1">
                    <div>
                        <div>
                            <span class="title">{{'settings.lowOrHighFidelityImageUnderstanding' | translate}}</span>
                        </div>
                        <div>
                            <span class="follow">{{'settings.controlDetailsParametersThreeOptions' | translate}}</span>
                        </div>
                    </div>
                    <nz-row>
                        <nz-col>
                            <nz-select class="select big" [(ngModel)]="configuration!.chatConfiguration.detail">
                                <nz-option-group [nzLabel]="'settings.fidelity' | translate">
                                    <nz-option *ngFor="let detail of details" [nzValue]="detail"
                                               [nzLabel]="detail"></nz-option>
                                </nz-option-group>
                            </nz-select>
                        </nz-col>
                    </nz-row>
                </div>

            </nz-card>

            <nz-card class="m-2 rounded-4">
                <div class="py-2">
                    <span class="title">{{'settings.defaultDrawingProperties' | translate}}</span>
                </div>
                <div class="d-flex justify-content-between  m-1">
                    <div>
                        <div>
                            <span class="title">{{'settings.numberOfImagesPerDrawing' | translate}}</span>
                        </div>
                        <div>
                            <span class="follow">{{'settings.recommendedRange' | translate}}</span>
                        </div>
                    </div>
                    <nz-row>
                        <nz-col>
                            <nz-slider class="slider" [(ngModel)]="configuration!.imageConfiguration.n"
                                       [nzStep]="1" [nzMin]="1" [nzMax]="10"
                            ></nz-slider>
                        </nz-col>
                        <nz-col>
                            <nz-input-number
                                    [nzMin]="1"
                                    [nzMax]="10"
                                    [ngStyle]="{ marginLeft: '16px' }"
                                    [(ngModel)]="configuration!.imageConfiguration.n"
                            ></nz-input-number>
                        </nz-col>
                    </nz-row>
                </div>
                <div class="d-flex justify-content-between  m-1">
                    <div>
                        <div>
                            <span class="title">{{'settings.imageSize' | translate}}</span>
                        </div>
                        <div>
                            <span class="follow">{{'settings.imageSizeExample' | translate}}</span>
                        </div>
                    </div>
                    <nz-row>
                        <nz-col>
                            <nz-select [(ngModel)]="configuration!.imageConfiguration.size">
                                <nz-option-group [nzLabel]="'settings.sizeOfImage' | translate">
                                    <nz-option *ngFor="let size of sizes" [nzValue]="size" [nzLabel]="size"></nz-option>
                                </nz-option-group>
                            </nz-select>
                        </nz-col>
                    </nz-row>
                </div>

                <div class="d-flex justify-content-between  m-1">
                    <div>
                        <div>
                            <span class="title">{{'settings.requestTypeResponseFormat' | translate}}</span>
                        </div>
                        <div>
                            <span class="follow">{{'settings.urlMayBecomeInvalid' | translate}}</span>
                        </div>
                    </div>
                    <nz-row>
                        <nz-col>
                            <nz-select class="select big"
                                       [(ngModel)]="configuration!.imageConfiguration.response_format">
                                <nz-option-group [nzLabel]="'settings.requestTypeResponseFormat' | translate">
                                    <nz-option *ngFor="let response_format of image_response_formats"
                                               [nzValue]="response_format" [nzLabel]="response_format"></nz-option>
                                </nz-option-group>
                            </nz-select>
                        </nz-col>
                    </nz-row>
                </div>
                <div class="d-flex justify-content-between  m-1">
                    <div>
                        <div>
                            <span class="title">{{'settings.drawingQuality' | translate}}</span>
                        </div>
                        <div>
                            <span class="follow">{{'settings.imageDrawingQuality' | translate}}</span>
                        </div>
                    </div>
                    <nz-row>
                        <nz-col>
                            <nz-select class="select big" [(ngModel)]="configuration!.imageConfiguration.quality">
                                <nz-option-group [nzLabel]="'settings.drawingQuality' | translate">
                                    <nz-option *ngFor="let quality of qualities" [nzValue]="quality"
                                               [nzLabel]="quality"></nz-option>
                                </nz-option-group>
                            </nz-select>
                        </nz-col>
                    </nz-row>
                </div>
                <div class="d-flex justify-content-between  m-1">
                    <div>
                        <div>
                            <span class="title">{{'settings.imageDrawingStyle' | translate}}</span>
                        </div>
                        <div>
                            <span class="follow">{{'settings.generatedImageStyle' | translate}}</span>
                        </div>
                    </div>
                    <nz-row>
                        <nz-col>
                            <nz-select class="select big" [(ngModel)]="configuration!.imageConfiguration.style">
                                <nz-option-group [nzLabel]="'settings.imageDrawingStyle' | translate">
                                    <nz-option *ngFor="let style of styles" [nzValue]="style"
                                               [nzLabel]="style"></nz-option>
                                </nz-option-group>
                            </nz-select>
                        </nz-col>
                    </nz-row>
                </div>
            </nz-card>
            <nz-card class="m-2 rounded-4">
                <div class="py-2">
                    <span class="title">{{'settings.textToSpeechPropertiesTTS' | translate}}</span>
                </div>
                <div class="d-flex justify-content-between  m-1">
                    <div>
                        <div>
                            <span class="title">{{'settings.voiceSelection' | translate}}</span>
                        </div>
                        <div>
                            <span class="follow">{{'settings.differentPeopleDifferentVoices' | translate}}</span>
                        </div>
                    </div>
                    <nz-row>
                        <nz-col>
                            <nz-select class="select big" [(ngModel)]="configuration!.speechConfiguration.voice">
                                <nz-option-group [nzLabel]="'settings.manVoice' | translate">
                                    <nz-option *ngFor="let voice of humanVoices" [nzValue]="voice"
                                               [nzLabel]="voice"></nz-option>
                                </nz-option-group>
                                <nz-option-group [nzLabel]="'settings.womanVoice' | translate">
                                    <nz-option *ngFor="let voice of womanVoices" [nzValue]="voice"
                                               [nzLabel]="voice"></nz-option>
                                </nz-option-group>
                            </nz-select>
                        </nz-col>
                    </nz-row>
                </div>
                <div class="d-flex justify-content-between  m-1">
                    <div>
                        <div>
                            <span class="title">{{'settings.returnedFileFormatResponseFormat' | translate}}</span>
                        </div>
                        <div>
                            <span class="follow">{{'settings.fileFormatReturnedLossOnPlayback' | translate}}</span>
                        </div>
                    </div>
                    <nz-row>
                        <nz-col>
                            <nz-select class="select big"
                                       [(ngModel)]="configuration!.speechConfiguration.response_format">
                                <nz-option-group [nzLabel]="'settings.fileFormat' | translate">
                                    <nz-option *ngFor="let response_format of speech_response_formats"
                                               [nzValue]="response_format" [nzLabel]="response_format"></nz-option>
                                </nz-option-group>
                            </nz-select>
                        </nz-col>
                    </nz-row>
                </div>
                <div class="d-flex justify-content-between  m-1">
                    <div>
                        <div>
                            <span class="title">{{'settings.speechSpeed' | translate}}</span>
                        </div>
                        <div>
                            <span class="follow">{{'settings.standardSpeedIs1' | translate}}</span>
                        </div>
                    </div>
                    <nz-row>
                        <nz-col>
                            <nz-slider class="slider" [(ngModel)]="configuration!.speechConfiguration.speed"
                                       [nzStep]="0.25" [nzMin]="0.25" [nzMax]="4"
                            ></nz-slider>
                        </nz-col>
                        <nz-col>
                            <nz-input-number
                                    [nzMin]="0.25"
                                    [nzMax]="4"
                                    [nzStep]="0.25"
                                    [ngStyle]="{ marginLeft: '16px' }"
                                    [(ngModel)]="configuration!.speechConfiguration.speed"
                            ></nz-input-number>
                        </nz-col>
                    </nz-row>
                </div>

            </nz-card>
            <nz-card class="m-2 rounded-4">
                <div class="py-2">
                    <span class="title">{{'settings.speechToTextPropertiesSTT' | translate}}</span>
                </div>
                <div class="d-flex justify-content-between  m-1">
                    <div>
                        <div>
                            <span class="title">{{'settings.samplingTemperature' | translate}}</span>
                        </div>
                        <div>
                          <span class="follow">{{'settings.temperatureSamplingBetweenZeroAndOne' | translate}}</span>
                        </div>
                    </div>
                    <nz-row>
                        <nz-col>
                            <nz-slider class="slider"
                                       [(ngModel)]="configuration!.transcriptionConfiguration.temperature"
                                       [nzStep]="0.01" [nzMin]="0" [nzMax]="1"
                            ></nz-slider>
                        </nz-col>
                        <nz-col>
                            <nz-input-number
                                    [nzMin]="0"
                                    [nzMax]="1"
                                    [nzStep]="0.01"
                                    [ngStyle]="{ marginLeft: '16px' }"
                                    [(ngModel)]="configuration!.transcriptionConfiguration.temperature"
                            ></nz-input-number>
                        </nz-col>
                    </nz-row>
                </div>
            </nz-card>

        </div>
    </div>
</div>
